<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		
		#box {
			width: 900px;
			height: 450px;
			border: 1px solid #ddd;
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -225px -450px;
			background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201708%2F13%2F20170813122935_nKwfQ.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643296120&t=c48742fa3d8679dbc75d02e8676da694);
			background-repeat: no-repeat;
			background-size: contain;
			background-position: center;
		}	
		#box::before,
		#box::after{
			content: '';
			display: block;
			width: 45px;
			height: 60px;
			background-color: grey;
			color: white;
			text-align: center;
			line-height: 60px;
			position: absolute;
			top: 50%;
			margin-top: -30px;
			
			
		}
		#box::before {
			content: '<';
		}
		#box::after {
			content: '>';
			right: 0;
		}
		ul {
			list-style: none;
			padding: 2px 4px;
			background-color: rgb(164 157 178);
			overflow: hidden;
			width: fit-content;
			border-radius: 20px;
			position: absolute;
			left: 50%;
			bottom: 20px;
			transform: translateX(-50%);
		}
		li {
			width: 15px;
			height: 15px;
			background-color: rgb(183 183 183);
			border-radius: 50%;
			float: left;
			
		}
		
		li:not(:first-child) {
			margin-left: 8px;
			
		}
		 li:first-child {
			background-color: yellow;
		}
	</style>
	<body><div id="box">
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
	</body>
</html>
